<template>
    <div class="carousel">
        <el-carousel :interval="4000" type="card" height="200px"  trigger="click">
            <el-carousel-item v-for="(item,index) in carousel" :key="index">
            <img  @click="Play(item.targetId)" :src="item.imageUrl">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
import { GetBanner,Getplaylistssss} from "@/api/Playlist";
export default {
        data() {
            return {
                carousel:[]
            }
    },
        methods: {
            Play(id) {
                Getplaylistssss(id).then(res => {
                    // console.log(res.data.songs);
                    const songs = res.data.songs
                    Promise.resolve(this.$store.commit("PlaylistDetails/unshiftPlayList", songs[0])).then(res => {
                        this.$store.commit("PlaylistDetails/setPlayListIndex", 1);
                        this.$store.commit("PlaylistDetails/setPlayListIndex", 0);
                    })
                })
             }
        },
    created() {
            GetBanner().then(res => {
                // console.log(res.data);
                this.carousel=res.data.banners
            })
        },
    }
</script>

<style lang="less" scoped>
.carousel{
    padding-top: 20px;
    .el-carousel__item img {
        width: 100%;
        height: 100%;
    }
}

  
</style>